<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css">
    <style type="text/css">

    </style>
</head>

<body id="body">
    <header id="header" class="aui-bar aui-bar-nav">
        <div class="aui-pull-left aui-btn aui-btn-outlined" id="menu_UI">
            <span class="aui-iconfont aui-icon-menu" id="menu_item"></span>
        </div>
        <div id="title1" class="aui-title">查看考勤</div>
        <br/>
    </header>

    <footer id="footer" class="aui-bar aui-bar-tab">
        <ul class="flex-wrap">
            <li id="li0" class="aui-bar-tab-item" onclick="randomSwitchBtn( this );" tapmode="">
                <i class="aui-iconfont aui-icon-home"></i>
                <label class="aui-bar-tab-label">查看考勤</label>
            </li>
            <li id="li1" class="aui-bar-tab-item" onclick="randomSwitchBtn( this );" tapmode="">
                <i class="aui-iconfont aui-icon-star"></i>
                <label class="aui-bar-tab-label">考勤</label>
            </li>
            <li id="li2" class="aui-bar-tab-item" onclick="randomSwitchBtn( this );" tapmode="">
                <i class="aui-iconfont aui-icon-my"></i>
                <label class="aui-bar-tab-label">个人中心</label>
            </li>
        </ul>
    </footer>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
    var header1 = document.getElementById("header");
    //var H = document.getElementById("dateselect");
    var footer1 = document.getElementById("footer");
    var title1 = document.getElementById("title1");
    var openUICalendarflag = false;
    // function openCalendar(){
    //     alert("test");
    //     var body_data = $api.byId('body');
    //     var html = '<input type="date"/>';
    //     $api.append(body_data, html);
    // }
    var count = 3; //3个界面
    var activeIndex = 0;
    var tit = ["查看考勤", "考勤", "个人中心"];
    var UICalendar;
    apiready = function() {
        $api.fixStatusBar($api.dom('header'));
        UICalendar = api.require('UICalendar');
        api.setStatusBarStyle({
            style: 'dark',
            color: '#03a9f5'
        });
        funIniGroup();
    }

    function funIniGroup() {
        var frames = [];
        for (var i = 0; i < count; ++i) {
            frames.push({
                name: 'main_school_leader_frm' + i,
                url: '../../html/schoolLeader/main_school_leader_frm' + i + '.html',
                bgColor: 'rgba(0,0,0,.2)',
                pageParam: {
                    "height1": header1.offsetHeight,
                    "height2": footer1.offsetHeight
                },
                bounces: false
            });
        }

        api.openFrameGroup({
            name: 'main_group',
            rect: {
                x: 0,
                y: header1.offsetHeight,
                w: 'auto',
                h: api.winHeight - header1.offsetHeight - footer1.offsetHeight
            },
            frames: frames,
            scrollEnabled: false
        }, function(ret, err) {
            if (ret) {
                var index = ret.index;
                var a = $api.dom("#li" + index);
                a.style.color = "#039be5";
                if (index == activeIndex) return;
                var b = $api.dom("#li" + activeIndex);
                b.style.color = "grey";
                activeIndex = index;
            }
        });
    }
    // 随意切换按钮
    function randomSwitchBtn(tag) {
        var index = tag.id.charAt(tag.id.length - 1);
        if (index == activeIndex) return;
        var a = $api.dom("#li" + index);
        a.style.color = "#039be5";
        var b = $api.dom("#li" + activeIndex);
        b.style.color = "grey";
        activeIndex = index;
        if (index != 0) {
            api.setFrameGroupAttr({
                name: 'today_group',
                hidden: true
            });
        } else {
            api.setFrameGroupAttr({
                name: 'today_group',
                hidden: false
            });
        }
        title1.innerHTML = tit[index];
        api.setFrameGroupIndex({
            name: 'main_group',
            index: index
        });
    }
</script>

</html>
